<template>
  <div class="login-container">

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <h1 style="color: #5daec1;
    margin-top: 20px;
    margin-bottom: 20px;">登录</h1>
      <!-- 滑块验证 -->
      <el-dialog title="请拖动滑块完成拼图" width="360px" v-model="isShowSliderVerify" :close-on-click-modal="false" @closed="refresh" append-to-body>
        <slider-verify ref="sliderVerify" @success="onSuccess" @fail="onFail" @again="onAgain"/>
      </el-dialog>

      <!-- 用户名输入框 -->
      <el-form-item prop="userName">
        <el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>

      <!-- 密码输入框 -->
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-button :loading="loading" round style="width:100%; margin-bottom:30px;" @click="handleLogin">登录</el-button>

    </el-form>
  </div>
</template>
<script>
import sliderVerify from '../components/SliderVerify.vue';
import request from "@/utils/request";

export default {
  name: 'LoginView',
  components: {
    sliderVerify,
  },
  data() {
    return {
      loginForm: {
        userName: '',
        password: '',
        // 随机字符串
        nonceStr: '',
        // 验证值
        value: '',
      },

      loading: false,
      // 是否显示滑块验证
      isShowSliderVerify: false,
      loginRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // Add more validation rules if needed
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // Add more validation rules if needed
        ],
      },
    }
  },
  methods: {
    /* 提交*/
    handleLogin() {
      let self = this;
      self.$refs.loginForm.validate((flag) => {
        self.isShowSliderVerify = flag;
      });
    },
    /* 登录*/
    login() {
      let self = this;
      self.loading = true;
      request.post('user/login', self.loginForm).then((res) => {
        if (res.code !== '-1'){
          self.$refs.sliderVerify.verifySuccessEvent();

          // 等待2秒后执行下面的代码
          setTimeout(() => {
            self.isShowSliderVerify = false;
            self.message('success', '登录成功');
            self.$router.push("/home");
          }, 1000);  // 2000 毫秒等于 2 秒
        }else {
          self.$refs.sliderVerify.verifyFailEvent(res.msg);
        }
      }).catch(() => {
        self.$refs.sliderVerify.verifyFailEvent();
      });
    },
    /* 滑动验证成功*/
    onSuccess(captcha) {
      Object.assign(this.loginForm, captcha);
      this.login();
    },
    /* 滑动验证失败*/
    onFail(msg) {
      this.loading = false;
      this.message('error', msg || '验证失败,请控制拼图对齐缺口');
      this.refresh();
    },
    /* 滑动验证异常*/
    onAgain() {
      this.loading = false;
      this.message('error', '滑动操作异常，请重试');
      this.refresh();
    },
    /* 刷新验证码*/
    refresh() {
      this.$refs.sliderVerify.refresh();
    },
    /* 提示弹框*/
    message(type, message) {
      this.$message({
        showClose: true,
        type: type,
        message: message,
        duration: 1500,
      });
    },

  },

}
</script>

<style>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置高度为视口高度的100% */
  background-color: #f0f0f0; /* 设置背景颜色为灰色 */
  text-align: center; /* 将内容水平居中 */
}

.login-form {
  max-width: 400px; /* 为表单设置最大宽度 */
  width: 100%;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影效果 */
  border-radius: 8px; /* 为圆角边框添加边框半径 */
}
</style>

